<template>
  <div>
    <z-main :loading="loading" title="登录" :selected-item="1">
      <div slot="main">
        <group title="登录名">
          <x-input placeholder="请输入登录名" :min="2" :max="12"></x-input>
        </group>
        <group title="密码">
          <x-input type="password" placeholder="请输入密码" v-model="password" :min="6" :max="12" @on-change="handleChange"></x-input>
        </group>
        <group title="验证码">
          <x-input class="weui-cell_vcode">
          <img slot="right" class="weui-vcode-img" src="http://weui.github.io/weui/images/vcode.jpg">
          </x-input>
        </group>
        <div class="z-link">没用账号？点击这里<router-link to="/register">注册</router-link></div>
	      <x-button type="primary login-btn" show-loading>登录</x-button>
      </div>
    </z-main>
  </div>
</template>

<script>
  import {Group, XInput, XButton} from 'vux'
  import ZMain from '@/pages/zmain'

  export default {
  	data(){
  	  return {
  	  	loading:false,
  	  	password:'',
  	  	password2:'',
  	  }
  	},
  	components:{
  	  ZMain,Group,XInput,XButton
  	},
  	methods:{
  	  handleChange(v){
  	  	console.info(v);
  	  }
  	}
  }
</script>

<style lang="less" scoped>
  @import "../../assets/style/mixin";
  .z-link{
    padding-top: .4rem;
    .font(.7rem, 1.2);
    &>a{
      color: @green;
      padding-left: .2rem;
    }
  }
  .login-btn{
    margin-top: .5rem;
  }
</style>